<template>
	<view>
		<NavBar title="门店"></NavBar>
		
		<view class="top_wrap" :style="{top: navBarHeight+'px',width:'100%',position:'fixed'}">
			<view class="store_picture_wrap">
			    <img :src="storePicture" class="store_picture"/>
			</view>
			
			<view class="cityList_wrap">
				<view v-for="region in regionList" :key="region.id" class="city" @click="handleRegionBtn(region.name)">
					<view  v-bind:style="[region.style]">{{region.name}}</view>
				</view>
			</view>	
		</view>
		
		<view class="storeList_wrap">
			<view class="store_wrap" v-for="(store,index) in storeList" :key="index" :style="{'background-color' : (index % 2 == 1) ? '#FFF8F7' : '' }">
				<view class="name">{{store.name}}</view>			 
				<view class="info">
				    <view class="businessHours">营业时间：{{store.opening_time}}~{{store.closing_time}}</view>
				    <view class="phone">营业电话：{{store.phone}}</view>
				</view>
				<view class="address">地址：{{store.address}}</view>
				<view class="submit_wrap">
				    <view class="submitBtn" @click="handleBook(store.name)">立即预约</view>
				</view> 
			</view>
		</view>
		
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar.vue';
	import {Request, getGlobalData} from '@/util.js';
	const domain = getGlobalData('domain');
	const openid = uni.getStorageSync('openid');
	const navBarHeight = uni.getStorageSync('navBarHeight');
	export default {
		components:{
			NavBar
		},
		data() {
			return {
				storePicture: "",
				navBarHeight:navBarHeight,
				regionList:[],
				storeList:[]
			};
		},
		
		mounted(){
			this.getStorePicture();
			this.getAllRegion();
			this.getStoreList();
			
		},
		methods:{
			handleBook(store){
				uni.setStorage({
					key:'selectedStore',
					data:store,
					success() {
						uni.switchTab({
							url:'/pages/book/index'
						})
					}
				})
			},
			handleRegionBtn(region){
				uni.setStorageSync('selectedRegion', region);
				let newRegionArr = [];
				let regionList = this.regionList;
				for(let i in regionList){
				    newRegionArr[i] = regionList[i];
				    if(regionList[i].name == region){   
			            newRegionArr[i].style = {color:"#fff",backgroundColor:"#D1A8A8"}
			        }else{
		                newRegionArr[i].style = {}
		            }
		        }
				this.regionList = newRegionArr;
				this.getStoreList();
			},
			getStorePicture(){
				Request(domain+"/client/image/getStore").then((res)=>{
					this.storePicture = res.data.data.url_1;
				});
			},
			getStoreList(){
				let selectedRegion = uni.getStorageSync('selectedRegion');
				if(selectedRegion){
					Request(domain+"/client/store/storeListForStorePage",{region: uni.getStorageSync('selectedRegion')}).then((res)=>{
						this.storeList = res.data.data;
						console.log(this.storeList);
					})
				}else{
					Request(domain+"/client/region/allRegion").then((res)=>{
						return res.data.data[0].name;
					}).then((res)=>{
						Request(domain+"/client/store/storeListForStorePage",{region: res}).then((res)=>{
						    this.storeList = res.data.data;
							console.log(this.storeList);
						});
					});
				}
	
			},
			getAllRegion(){
				const selectedRegion = uni.getStorageSync('selectedRegion');
				console.log(selectedRegion);
				Request(domain+"/client/region/allRegion").then((res)=>{
					 var data = res.data.data;
					 var newRegionArr = [];
					 for(let i in data){
					    newRegionArr[i] = data[i]
					    if(selectedRegion){
							if(selectedRegion == data[i].name){
					            newRegionArr[i].style = {color:'#fff',backgroundColor:'#D1A8A8'}
					        }else{
					            newRegionArr[i].style = {}
					        }
					    }else{
					        if(i == 0){
					            newRegionArr[i].style = {color:'#fff',backgroundColor:'#D1A8A8'}
							}else{
					            newRegionArr[i].style = {}
							}
					                     
						}
					}
					
					this.regionList = newRegionArr;
				})
			}
		},
		onShow(){
			this.commitTabBarID(4);
		},
	}
</script>

<style lang="less">
	@import "../../uni.less";
	page{
	    // background-color: @background_color;
	    padding-bottom: 100px;

	}
</style>

<style scoped lang="less">
	
.top_wrap{
    z-index: 1;

    .store_picture_wrap{
        height: 450rpx;
        background-color: #FAF0EF;
        .store_picture{
            width:100%;
            height:100%;         
        }
    }

    .cityList_wrap{
        width: 100%;
        height: 60rpx;
        border-bottom: 3rpx solid #D1A8A8;
        background-color: #FAF0EF;
		display: flex;
		
        .city{
            width: 25%;
            color: #D1A8A8;
            text-align: center;
            line-height: 60rpx;
            height: 100%;
        }
    }
}



.storeList_wrap{
    width:93%;
    margin: 0 auto;
    margin-top:700rpx;
    z-index: -1;


    .store_wrap{
        height: 320rpx;
        width:100%;
        background-color: #FAF0EF;
        margin:20rpx auto;
        border-radius: 10rpx;
        position: relative;
        color:#707070;
        font-size: 25rpx;

        .name{
            color: #63403F;
            font-size: 31rpx;
            text-align: center;
            width:100%;
            height: 60rpx;
            line-height: 60rpx;
            position: absolute;
            margin-top:20rpx;
            font-weight: 500;

        }

        .info{
            width:100%;
            display: flex;
            
            justify-content: space-between;
            position: relative;
            width: 90%;
            margin: 0 auto;
            top:90rpx;
        }

        .address{
            // border:1px solid #000;
            position: relative;
            width: 90%;
            margin: 0 auto;
            top:110rpx;
        }

        .submit_wrap{
            width:100%;
            // border:1px solid #000;
            position: absolute;
            height: 57rpx;
            line-height: 57rpx;
            bottom:20rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            .submitBtn{
                width:200rpx;
                text-align: center;
                height: 100%;
                background-color: #D1A8A8;
                color:#fff;
                font-size: 29rpx;
                font-weight: bolder;
                border-radius: 30rpx;
            }
        }
    }
}
</style>
